<!--
 * @Author: 陈俊升 761723995@qq.com
 * @Date: 2023-12-12 11:14:35
 * @LastEditors: 陈俊升 761723995@qq.com
 * @LastEditTime: 2024-03-11 15:31:47
 * @FilePath: /hr_new_vue3/src/views/Management/Home/LeaveManagement/Certificate/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 离职手续详情 -->
<template>
  <ContentCard>
    <template #header>
      <PageHeaderNew :title="title" show-back> </PageHeaderNew>
    </template>
    <section>
      <div class="title-box">
        <div class="title">
          <div
            :style="{
              marginLeft: '25px'
            }"
          >
            基础信息
          </div>
        </div>
      </div>
      <div>
        <a-form :model="formData" auto-label-width disabled>
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item label="姓名" label-col-flex="100px" show-colon>
                <a-input v-model="formData.name" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="手机号码" label-col-flex="100px" show-colon>
                <a-input v-model="formData.mobile" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="部门" label-col-flex="100px" show-colon>
                <a-input v-model="formData.dept" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="职位" label-col-flex="100px" show-colon>
                <a-input v-model="formData.position" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="直接上级" label-col-flex="100px" show-colon>
                <a-input v-model="formData.superior" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="离职时间" label-col-flex="100px" show-colon>
                <a-input v-model="formData.leaveTime" />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </section>
    <section>
      <div class="title-box">
        <div class="title">
          <div
            :style="{
              marginLeft: '25px'
            }"
          >
            离职手续详情
          </div>
        </div>
      </div>
      <a-table
        :data="tableData.data.children"
        :span-method="dataSpanMethod"
        row-key="id"
        :bordered="{
          wrapper: true,
          cell: true,
          headerCell: true,
          bodyCell: true
        }"
        stripe
        :pagination="false"
        v-model:selectedKeys="selectedKeys"
      >
        <template #columns>
          <a-table-column
            align="center"
            title="办理环节"
            dataIndex="handlerProcess"
            :width="200"
          >
          </a-table-column>
          <a-table-column
            :width="200"
            dataIndex="handlerMatters"
            align="center"
            title="办理事项"
          ></a-table-column>
          <a-table-column
            :width="200"
            dataIndex="matterAsk"
            align="center"
            title="办理事项要求"
          ></a-table-column>
          <a-table-column
            :width="200"
            dataIndex="handlerDept"
            align="center"
            title="办理部门"
          >
            <template #cell="{ record }">
              {{ findOrganizationDetail(record.handlerDept as number)?.name }}
            </template>
          </a-table-column>
          <a-table-column
            :width="100"
            dataIndex="handlerUser"
            align="center"
            title="办理人"
          >
            <template #cell="{ record }">
              {{ findHumanDetail(record.handlerUser)?.name }}
            </template>
          </a-table-column>
          <a-table-column
            :width="150"
            dataIndex="userMobile"
            align="center"
            title="办理人联系方式"
          >
            <template #cell="{ record }">
              {{ findHumanDetail(record.handlerUser)?.mobile }}
            </template>
          </a-table-column>
          <a-table-column
            :width="200"
            dataIndex="handlerAddr"
            align="center"
            title="办理地点"
          >
            <template #cell="{ record }">
              {{ findWorkAddressName(record.handlerAddr as number) }}
            </template>
          </a-table-column>
          <a-table-column
            :width="200"
            dataIndex=""
            align="center"
            title="办理状态"
          >
            <template #cell="{ record }">
              <span
                :class="{
                  'text-[#00b42a]':
                    filterStatus(record) === '已完成' ? true : false,
                  'text-[#ccc]':
                    filterStatus(record) === '未完成' ? true : false
                }"
              >
                {{ filterStatus(record) }}
              </span>
            </template>
          </a-table-column>
          <a-table-column
            :width="100"
            dataIndex="handlerEnter"
            align="center"
            title="办理人确认"
          >
            <template #cell="{ record }">
              <!-- <a-button type="primary" v-if="record.handlerEnter === 0"
                >确认办理</a-button
              > -->
              <!-- <a-button type="primary" v-if="record.handlerEnter === 0"
                >未确认</a-button
              > -->
              <span class="text-[#ccc]" v-if="record.handlerEnter === 2"
                >未确认</span
              >
              <span class="text-blue" v-else>已确认</span>
            </template>
          </a-table-column>
          <a-table-column
            :width="100"
            dataIndex="createEnter"
            align="center"
            title="员工确认"
          >
            <template #cell="{ record }">
              <!-- <a-button
                type="primary"
                v-if="record.createEnter === 1"
                @click="handleConfirm(record)"
              >
                确认办理</a-button
              > -->
              <span class="text-[#ccc]" v-if="record.createEnter === 2"
                >未确认</span
              >
              <span class="text-blue" v-else>已确认</span>
            </template>
          </a-table-column>
        </template>
      </a-table>
    </section>
  </ContentCard>
</template>

<script lang="tsx" setup>
import {
  PostEntryProcedure,
  PutEntryProcedure,
  PutEntryProcedureStatus2Human,
  GetEntryProcedureDetail,
  ChangeEntryProcedureStatus
} from '@/apis/management/human/humanChange/entry/index';
import {
  getAllWorkAddress,
  getFlatDept,
  getAllHumanRoster,
  getHumanDetail,
  getPositionFlatList
} from '@/utils/common';
import { getControlValue } from '@/utils/control';
import { Modal } from '@arco-design/web-vue';

const route = useRoute();
const title = '离职手续详情';
const id = +route.params.id;

const formData = reactive({
  name: '',
  mobile: '',
  dept: '',
  position: '',
  superior: '',
  leaveTime: ''
});

const tableData = reactive({
  data: {}
});

let selectedKeys = ref([]); // 选中的数据
const getTableData = async () => {
  try {
    const res = await GetEntryProcedureDetail({
      id,
      type: 3
    });
    tableData.data = res;
  } catch (error: unknown) {
    console.log(error);
  }
};
getTableData();

let organizationList = ref([]),
  humanList = ref([]),
  workAddress = ref([]);

// 获取部门、办理人等数据
const getData = async () => {
  try {
    const [
      personDetailRes,
      organizationListRes,
      humanListRes,
      workAddressRes,
      positionRes
    ] = await Promise.all([
      getHumanDetail(id),
      getFlatDept(),
      getAllHumanRoster(),
      getAllWorkAddress(),
      getPositionFlatList()
    ]);
    organizationList.value = organizationListRes;
    humanList.value = humanListRes;
    workAddress.value = workAddressRes;

    formData.name = personDetailRes.name;
    formData.mobile = personDetailRes.mobile;
    formData.dept = organizationListRes.find(
      (el: any) =>
        el.id ===
        +getControlValue(
          personDetailRes.useTemplate.collectionModel,
          'CED44AC9966904CD1AB546D309903727C'
        )
    )?.name;
    formData.position = positionRes.find(
      (el: any) =>
        el.id ===
        +getControlValue(
          personDetailRes.useTemplate.collectionModel,
          'C7341027925C943708F3AEF98703ECC47'
        )
    )?.name;
    // formData.superior = humanListRes.find(
    //   (el: any) =>
    //     el.id ===
    //     +getControlValue(
    //       personDetailRes.useTemplate.collectionModel,
    //       'CED44AC9966904CD1AB546D309903727C'
    //     )
    // )?.name;
    formData.leaveTime = getControlValue(
      personDetailRes.useTemplate.collectionModel,
      'C32CE0D2E17DA4BA9BC08FED5718CED7E'
    );
  } catch (error: unknown) {
    console.log(error);
  }
};
getData();
const findOrganizationDetail = (id: number) => {
  return organizationList.value.find((el: any) => el.id === id);
};

const findHumanDetail = (id: number) => {
  return humanList.value.find((el: any) => el.id === id);
};
const findWorkAddressName = (id: number) => {
  return workAddress.value.find((el: any) => el.id === id)?.name;
};

const filterStatus = (record) => {
  if (record.handlerEnter === 1 && record.createEnter === 1) return '已完成';
  return '未完成';
};

// 表格合并
const dataSpanMethod = (datas: any) => {
  const { record, rowIndex, columnIndex, column } = datas;
  // 当检索到相同数据则返回 那条数据
  let arr = tableData.data.children.filter((res: any) => {
    return res.handlerProcess == record.handlerProcess;
  });
  // 匹配到相同数据的长度
  // obj.rowspan = arr.length;
  if (
    tableData.data.children[rowIndex - 1]?.handlerProcess !=
      record.handlerProcess &&
    (column.dataIndex === 'handlerProcess' ||
      column.dataIndex === 'handlerDept' ||
      column.dataIndex === 'handlerUser' ||
      column.dataIndex === 'handlerAddr' ||
      column.dataIndex === 'userMobile' ||
      column.dataIndex === 'operation' ||
      column.dataIndex === 'personName')
  ) {
    // 匹配到相同数据的长度
    return { rowspan: arr.length };
  }
};
</script>

<style lang="less" scoped>
:deep(.arco-table-th),
:deep(.arco-table-td) {
  height: 30px;
}
footer {
  height: 60px;
  width: calc(100% - 100px);
  background-color: #fff;
  box-shadow: 1px -1px 10px 0 #cacaca;
  position: fixed;
  bottom: 0;
  left: 10%;
  display: flex;
  justify-content: center;
  align-items: center;

  .btn {
    width: 120px;
    height: 40px;
    border-radius: 5px;
  }
}

.title-box {
  position: relative;
  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 36px;
    border-radius: 4px;
    font-weight: 700;
    margin-bottom: 10px;
    background: #edeffd;
  }
}

.title-box::before {
  position: absolute;
  // top: 33px;
  left: 10px;
  display: inline-block;
  height: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  margin-right: 20px;
  border-radius: 2px;
  // transform: translateY(-50%);
  content: '';
  background-color: #165dff;
}
</style>
